<script setup lang="ts">
import { ref, watch } from 'vue'
import RecordItem from '@/components/record/components/record-item.vue'
import floatAction from '@/assets/img/record/float-action.png'
import FilterBox from '@/components/record/components/filter-box.vue'
import { findOrderGroupPage, findOrderSum } from '@/api'
import toThousands from '@/utils/formatNumber'
import { Pagination, List, PullRefresh } from 'vant'

type Props = {
  lotteryCode: string
}

const props = defineProps<Props>()

const showRecordStatistics = ref(false)
const showFloatAction = ref(false)
const vanPullRefreshRef = ref<HTMLDivElement>()
const filterForm = ref({
  lotteryCode: props.lotteryCode,
  dateRange: [],
  lotteryStatus: undefined,
  playTypeCode: undefined,
  periodsNumber: undefined,
})

const list = ref([])
const pagination = ref({
  current: 1,
  size: 10,
  total: 0,
  pages: 0,
})
const summary = ref({
  totalAmount: 0,
  validAmount: 0,
  runningAmount: 0,
  rewardAmount: 0,
  realRewardAmount: 0,
})

const scrollTop = () => {
  if (!vanPullRefreshRef?.value?.$el?.scrollTo) return
  vanPullRefreshRef.value.$el.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

const onScroll = ({ target }) => {
  showFloatAction.value = target.scrollTop !== 0
}

const onLoad = () => {
  const commonParams = {
    startTime: filterForm.value.dateRange[0],
    endTime: filterForm.value.dateRange[1],
    lotteryCode: filterForm.value.lotteryCode || undefined,
    orderStatus: filterForm.value.lotteryStatus,
    playTypeCode: filterForm.value.playTypeCode,
    periodsNumber: filterForm.value.periodsNumber,
  }
  const orderParams = {
    ...commonParams,
    ...pagination.value,
  }

  scrollTop()

  if (pagination.value.current === 1) {
    findOrderSum(commonParams).then((res) => {
      summary.value = res.data
    })
  }

  findOrderGroupPage(orderParams).then((res) => {
    list.value = res.data.records

    pagination.value = {
      current: res.data.current,
      size: res.data.size,
      total: res.data.total,
      pages: res.data.pages,
    }

    showRecordStatistics.value = pagination.value.current === 1 && list.value.length > 0
  })
}

const toHome = () => {
  pagination.value.current = 1
  onLoad()
}

const toEnd = () => {
  pagination.value.current = pagination.value.pages
  onLoad()
}

const onPrev = () => {
  if (pagination.value.current > 1) {
    pagination.value.current--
    onLoad()
  }
}

const onNext = () => {
  if (pagination.value.current < pagination.value.pages) {
    pagination.value.current++
    onLoad()
  }
}

watch(
  () => filterForm.value,
  () => {
    pagination.value = {
      current: 1,
      size: 10,
      total: 0,
    }
    onLoad()
  },
  { deep: true },
)
</script>

<template>
  <div class="record">
    <filter-box @change="(form) => (filterForm = form)" :lottery-code="lotteryCode"></filter-box>

    <div class="content">
      <PullRefresh class="van-pull-refresh" ref="vanPullRefreshRef" :disabled="true" @scroll="onScroll">
        <List :finished="true" finished-text="">
          <record-item
            v-for="item of list"
            :key="item"
            :data="item"
            :start-time="filterForm.dateRange[0]"
            :end-time="filterForm.dateRange[1]"
            :lottery-code="filterForm.lotteryCode"
          />
        </List>
      </PullRefresh>
    </div>

    <div :class="['footer', { openUp: showRecordStatistics }]">
      <div class="record-statistics">
        <div class="item">
          <span class="purple">{{ toThousands(summary.totalAmount) }}</span>
          <span>总投注</span>
        </div>
        <div class="item">
          <span class="purple">{{ toThousands(summary.runningAmount) }}</span>
          <span>总流水</span>
        </div>
        <div class="item">
          <span class="purple">{{ toThousands(summary.rewardAmount) }}</span>
          <span>总派奖</span>
        </div>
        <div class="item">
          <span class="red">{{ toThousands(summary.realRewardAmount) }}</span>
          <span>实际派奖</span>
        </div>
      </div>

      <div class="pagination">
        <span class="btn right-line" @click="toHome">首页</span>
        <Pagination :total-items="24" :items-per-page="5" :show-page-size="1">
          <template #prev-text>
            <span class="btn" @click="onPrev">上一页</span>
          </template>
          <template #next-text>
            <span class="btn" @click="onNext">下一页</span>
          </template>
          <template #page><input type="number" :value="pagination.current" disabled /></template>
        </Pagination>
        <span class="btn left-line" @click="toEnd">尾页</span>
      </div>
      <!-- <div class="pagination-statistics">合计{{ pagination.total }}条数据，共{{ pagination.pages }}页面</div> -->

      <img
        :class="['float-action', { 'show-float-action': showFloatAction }]"
        @click="scrollTop"
        :src="floatAction"
        alt=""
      />
    </div>
  </div>
</template>

<style scoped lang="less">
.record {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #171a26;
  .purple {
    color: #896adb;
  }

  .red {
    color: #e15375;
  }

  .content {
    width: 100%;
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;

    .van-pull-refresh {
      width: 100%;
      height: 100%;
      overflow-y: scroll;

      :deep(.van-list) {
        padding: 0 5px;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
    }
  }

  .footer {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 4px;
    box-shadow: 0px -2px 2px 0px #192c431a;
    overflow: hidden;
    transition: all 0.3s;
    border-radius: 0;
    z-index: 1;

    &.openUp {
      .record-statistics {
        height: 57px;
        opacity: 1;
      }

      .float-action {
        bottom: 150px;
      }
    }

    .record-statistics {
      width: 100%;
      display: flex;
      align-items: center;
      height: 0;
      opacity: 0;
      transition: all 0.3s;

      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        gap: 5px;
      }
    }

    .pagination {
      display: flex;
      align-items: center;
      color: rgba(198, 204, 255, 1);
      font-size: 11px;
      margin-top: 10px;
      background-image: url('@/assets/img/record/pagination-bg.png');
      background-size: 100% 100%;

      .btn {
        width: 60px;
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-items: center;
        justify-content: center;

        &.right-line,
        &.left-line {
          &:after {
            content: '';
            position: absolute;
            right: 0;
            width: 1px;
            height: 70%;
            background: rgba(121, 123, 181, 1);
          }
        }

        &.left-line {
          &:after {
            right: auto;
            left: 0;
          }
        }
      }

      :deep(.van-pagination__item) {
        background-color: transparent;
        color: rgba(198, 204, 255, 1);
        font-size: 11px;
        width: 60px;
        min-width: 60px;
        border: 0;
        padding: 0;
        margin: 0;

        &:after {
          border: 0;
        }
      }

      input {
        width: 100%;
        height: 22px;
        color: #fff;
        padding: 0;
        margin: 0;
        text-align: center;
        border-radius: 10px;
        border: 0.5px solid rgba(82, 86, 163, 1);
        background: linear-gradient(0deg, #232553, #232553);
      }
    }

    .pagination-statistics {
      color: #9fb3cc;
      font-size: 10px;
    }

    .float-action {
      width: 36px;
      height: 36px;
      position: fixed;
      bottom: 100px;
      right: 10px;
      z-index: 100;
      transition: all 0.3s;
      opacity: 0;

      &.show-float-action {
        opacity: 1;
      }
    }
  }
}
</style>
